<template>
  <el-container>
    <el-aside width="250px">
      <hostsGroupTable function_choice="query" @childClick="envClick" />
    </el-aside>
    <el-container>
      <el-header style="font-size: 12px; width: 100%">
        <el-button type="primary" size="mini" @click="deploy_app"
          >部署</el-button
        >
        <el-button type="primary" size="mini">部署调整</el-button>
        <el-button type="primary" size="mini">日志查看</el-button>
        <el-button type="primary" size="mini">重启</el-button>
        <el-button type="primary" size="mini">停止</el-button>
        <el-button type="primary" size="mini">清理缓存</el-button>
        <el-button type="primary" size="mini">包下载</el-button>
      </el-header>
      <el-main>
        <el-alert
          style="margin-bottom: 2px"
          title="双击版本号可修改"
          type="info"
          close-text="知道了"
        >
        </el-alert>
        <el-table
          @selection-change="app_table_selection_change"
          @cell-dblclick="tableDbclick"
          highlight-current-row
          cell-style="padding:0"
          :data="app_table"
          style="font-size: 10px; width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="应用名称"
            prop="app_nick"
          >
          </el-table-column>
          <!--          show-overflow-tooltip-->
          <el-table-column prop="deploy_package_versions" label="版本">
            <template #default="{ row }">
              <el-row>
                <el-input
                  @blur="blurDeployPackageversions(row)"
                  v-if="row.input_on"
                  ref="deploy_package_versions_ref"
                  v-model="deploy_package_versions_swap"
                  style="width: 100%; height: 100%"
                  size="mini"
                ></el-input>
                <span v-else>{{ row.deploy_package_versions }}</span>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="服务器ip"
            prop="host_ip"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="包名称"
            prop="package_name"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="关联软件"
            prop="soft_nick"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="部署类"
            prop="package_type_name"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="源"
            prop="package_repository_name"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="部署信息"
            prop="app_deploy_info"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="部署状态"
            prop="app_deploy_status"
          >
            <template v-slot="scope">
              <i
                v-if="scope.row.app_deploy_status"
                class="el-icon-success"
                style="color: #67c23a"
              />
              <i
                v-else-if="!scope.row.app_deploy_status"
                class="el-icon-error"
                style="color: #f56c6c"
              ></i>
              <i v-else class="el-icon-question" style="color: #909399"></i>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import hostsGroupTable from "@/components/communal/hosts_group_table.vue";
import { ref } from "vue";
import * as Request from "@/general/request";
import { ElMessage } from "element-plus";

export default {
  name: "resource_management",
  components: {
    hostsGroupTable,
  },
  setup() {
    const deploy_package_versions_ref = ref(null);
    let env_id = ref("");
    const envClick = (e) => {
      env_id.value = e;
      get_env_host_app();
    };
    let app_table = ref([]);
    let deploy_package_versions_swap = ref("");
    let selection_list = ref([]);
    let selection_app_ids = ref([]);

    const tableDbclick = (row) => {
      row.input_on = !row.input_on;
      deploy_package_versions_swap.value = row.deploy_package_versions;
      setTimeout(() => {
        deploy_package_versions_ref.value.focus();
      }, 20);
    };

    const blurDeployPackageversions = (row) => {
      row.input_on = false;
      row.deploy_package_versions = deploy_package_versions_swap.value;
      put_update_app_version(row.app_id, row.deploy_package_versions);
    };

    const app_table_selection_change = (e) => {
      selection_list.value = e;

      selection_app_ids.value = [];
      let i = 0,
        len = e.length;
      for (; i < len; ) {
        selection_app_ids.value.push(e[i].soft_id);
        i++;
      }
    };

    const deploy_app = async () => {
      const response = await Request.POST(
        "/background/home/deploy/deploy_app/",
        { app_ids: selection_app_ids.value }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const get_env_host_app = async () => {
      const response = await Request.GET(
        "/background/home/deploy/env_deploy_app",
        { env_id: env_id.value }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          app_table.value = return_data.data;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const put_update_app_version = async (app_id, deploy_package_versions) => {
      const response = await Request.PUT(
        "/background/home/deploy/update_app_version",
        {
          app_id: app_id,
          deploy_package_versions: deploy_package_versions,
        }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          // app_table.value = return_data.data
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    return {
      tableDbclick,
      blurDeployPackageversions,
      envClick,
      app_table,
      deploy_package_versions_swap,
      deploy_package_versions_ref,
      deploy_app,
      app_table_selection_change,
    };
  },
};
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
